<template>
	<el-button :icon="Picture" @click="drawerShow = true">图片选择</el-button>
	<el-drawer v-model="drawerShow" size="70%" :destroy-on-close="true" :with-header="false">

		<el-tabs v-model="activeName" class="demo-tabs">
			<el-tab-pane label="图片选择" name="select">
				<div class="list-contant">
					<div v-for="(item,index) in tableData.list" class="list-item" @click="selectImg(index)">
						<el-image :class="{'img':true,'selected':item.selected === true}" :src="item.url"></el-image>
					</div>
				</div>
				<el-empty v-if="tableData.list.length==0" description="未找到相关数据" />
				<div class="gva-pagination" v-if="tableData.page_info.total_page>1">
					<el-pagination background layout="prev, pager, next" :page-size="page_size"
						:page-count="tableData.page_info.total_page" :total="tableData.page_info.total_number"
						@current-change="handleCurrentChange" />
				</div>
			</el-tab-pane>
			<el-tab-pane label="图片上传" name="upload">
				<el-upload  drag
					:action="action" multiple list-type="picture" name="image_file" :data="actionData" :on-change="fileChange">
					<el-icon class="el-icon--upload">
						<Plus />
					</el-icon>
					<div class="el-upload__text">点击或拖拽文件到此处上传</div>
					<div class="el-upload__text">支持jpg、png、gif</div>
					
				</el-upload>

			</el-tab-pane>
		</el-tabs>
		<template #footer>


			<el-row :gutter="20">
				<el-col :span="16">
					<div class="selectedList">
						<div class="selected-item" v-for="(item,index) in selectedImgs">
							<el-icon class="selected-remove" @click="selectImgRemove(index)">
								<CircleCloseFilled />
							</el-icon>
							<el-image :src="item.url"></el-image>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="dialog-footer">
						<el-button @click="drawerShow = false">取消</el-button>
						<el-button type="primary" @click="onReceiveImage">
							确认({{selectedImgs.length}}/{{limit}})
						</el-button>
					</div>
				</el-col>
			</el-row>



		</template>
	</el-drawer>
</template>

<script setup lang="ts">
	import { Picture } from '@element-plus/icons-vue'
	import { getImgList } from '@/api/material'
	import { ref, computed } from 'vue'
	defineOptions({
		name: 'OceanEnginelImg',
	})
	const props = defineProps({
		type: {
			type: String,
			default: "CREATIVE_IMAGE_MODE_LARGE_VERTICAL",
		},
		advertiser_id: {
			type: Number,
			default: null,
		},
		limit: {
			type: Number,
			default: 10
		}
	})
	const drawerShow = ref(false)
	const activeName = ref("select")
	const emit = defineEmits(['receive'])
	const onReceiveImage = () => {
		drawerShow.value = false
		emit('receive', selectedImgs.value)
	};
	const page = ref(1)
	const page_size = ref(10)
	const tableData = ref({ list: [], page_info: {} })
	const getList = () => {
		let ratio, width, height;
		switch (props.type) {
			case "CREATIVE_IMAGE_MODE_LARGE":
				ratio = "1.78"
				break;
			case "CREATIVE_IMAGE_MODE_LARGE_VERTICAL":
				ratio = "0.56"
				break;
			case "CREATIVE_IMAGE_MODE_DISPLAY_PRODUCT":
				width = 108;
				height = 108;
				break;
		}
		let params = {
			page: page.value,
			page_size: page_size.value,
			advertiser_id: props.advertiser_id,
		}
		if (ratio) params["ratio"] = ratio
		if (width) params["width"] = width
		if (height) params["height"] = width
		getImgList(params).then(res => {
			if (res.code == 0) {
				tableData.value = res.data
			}
		})
	}
	const selectedImgs = ref([])
	const selectImg = (index) => {
		if (!selectedImgs.value.some(obj => obj.id === tableData.value.list[index].id) && props.limit > selectedImgs.value.length) {
			tableData.value.list[index].selected = true
			selectedImgs.value.push(tableData.value.list[index])
		}
	}
	const selectImgRemove = (index) => {
		let idx = tableData.value.list.findIndex(obj => obj.id == selectedImgs.value[index].id)
		if (idx >= 0) {
			tableData.value.list[idx].selected = false
		}
		selectedImgs.value.splice(index, 1)
	}
	getList()
	const handleCurrentChange = (val) => {
		page.value = val
		getList()
	}
	const action = ref()
	action.value = import.meta.env.VITE_BASE_API+"/openApi/file/image/ad/"
	const actionData = {
		advertiser_id:props.advertiser_id,
		upload_type:"UPLOAD_BY_FILE",
	}
	const fileChange = (e) => {
		if(e.status == "success"){
			if (props.limit > selectedImgs.value.length) {
				selectedImgs.value.push(e.response.data)
			}
		}
	}
</script>

<style scoped>
	.list-contant {
		width: 100%;
		height: 100%;
		display: inline-flex;
		flex-wrap: wrap;
	}

	.list-item {
		width: 150px;
		margin-right: 1vh;
	}

	.list-item .img {
		cursor: pointer;
		border: 3px solid #cccccc;
	}

	.list-item .img:hover {
		border: 3px solid #194ED2;
	}

	.list-item .selected {
		border: 3px solid #194ED2;
	}

	.selectedList {
		width: 60%;
		display: flex;
	}

	.selected-item {
		width: 4vh;
		margin-right: 1vh;
	}

	.selected-remove {
		display: inline-flex;
		cursor: pointer;
		top: 2vh;
		right: 2vh;
		z-index: 100;
	}

	.dialog-footer {
		float: right;
		margin-top: 6vh
	}
</style>